const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
    entry: ['./src/js/index.js','./src/index.html'],
    output: {
        filename: 'built.js',
        path: resolve(__dirname, "build")
    },
    devtool: 'eval-cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                generator: {
                    filename: 'img/[name].[hash:8][ext]',
                    publicPath: './'
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024
                    }
                }
            }, {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                exclude: /\.(png|jpg|gif|html|less|css|js)$/,
                loader: 'file-loader'
            },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'thread-loader',//开启多线程
                        options: {
                            worker: 6,
                        }
                    },
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env'
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                removeComments: true,
                collapseWhitespace: true
            }
        }),
        new MiniCssExtractPlugin({
            filename: './css/built.css'
        }),
        new OptimizeCssAssetsPlugin()
    ],
    cache: {
        type: 'filesystem', //filesystem缓存文件系统 memory缓存记忆的文件
    },
    optimization: { //可以将node_modules单独打包成一个js
        splitChunks: {
            chunks: 'all'
        }
    },
    mode: 'development',
    devServer: {
        static: './build',
        port: 7700,
        open: true,
        compress: true,
        hot:true //开启热更新 必须重启webpack 在线服务
    },
    optimization: { //可以将node_modules单独打包成一个js
        splitChunks: {
            chunks: 'all'
        }
    }
}